<!DOCTYPE html>
<html lang="zh">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>导航</title>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <link href="css/swiper.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="container" id="index">
            <div class="header">
                <div class="location">镇江</div>
                <div class="logo">
                    <img src="images/logo.png" />
                </div>
                <div class="search">

                </div>
                <div class="tip-msg">
                        <i>1</i>
                </div>
            </div>
            <div class="banner">
                <div class="swiper-container swiper-banner">
                    <div class="swiper-wrapper">
                        <a class="swiper-slide" >
                            <img src="tmp/1492136627084.jpg" />
                        </a>
                        <a class="swiper-slide" >
                            <img src="tmp/1493192339733.jpg" />
                        </a>
                        <a class="swiper-slide" >
                            <img src="tmp/1493977819740.jpg" />
                        </a>
                    </div>
                    <div class="swiper-pagination swiper-pagination-white"></div>
                </div>
            </div>
            <div class="quick-block">
                <div class="quick-item" >
                    <img class="quick-icon" src="tmp/q_01.png" />
                </div>
                <div class="quick-item" >
                    <img class="quick-icon"  src="tmp/q_01.png" />
                </div>
                <div class="quick-item" >
                    <img class="quick-icon"  src="tmp/q_01.png" />
                </div>
                <div class="quick-item" >
                    <img class="quick-icon" src="tmp/q_01.png" />
                </div>
                <div class="quick-item" >
                    <img class="quick-icon"  src="tmp/q_01.png" />
                </div>
                <div class="quick-item" >
                    <img class="quick-icon"  src="tmp/q_01.png" />
                </div>
            </div>
            <div class="news">
                <div class="swiper-containers swiper-news">
                    <div class="swiper-wrapper">
                        <a class="swiper-slide">
                            我们在镇江悬赏第1批体验志愿者
                        </a>
                        <a class="swiper-slide">
                            我们在镇江悬赏第2批体验志愿者
                        </a>
                        <a class="swiper-slide">
                            我们在镇江悬赏第3批体验志愿者
                        </a>
                        <a class="swiper-slide">
                            我们在镇江悬赏第4批体验志愿者
                        </a>
                    </div>
                </div>
            </div>
            <div class="activity clearfix">
                <a><img src="tmp/act-01.png"></a>
                <a><img src="tmp/act-01.png"></a>
                <a><img src="tmp/act-01.png"></a>
                <a><img src="tmp/act-01.png"></a>
            </div>

            <div class="time-limit">
                <h4 class="hd">活动倒计时</h4>
                <div class="timer">
                    <div class="hour">00</div>
                    <div class="fg">:</div>
                    <div class="minu">00</div>
                    <div class="fg">:</div>
                    <div class="second">00</div>
                </div>
                <p class="next">下一场 2017/06/02 开始</p>

                <img class="gift" src="tmp/gift.png"/>
            </div>
            <div class="nearby-activity">
                <div class="hd">
                    <h3 class="ht">附近活动</h3>
                </div>
                <div class="bd">
                    <div class="act-list" >
                        <a  class="act-item" >
                            <img src="tmp/food.png" />
                            <p class="title">1江南金三沙韩式韩式韩式</p>
                            <p class="desp">1开业酬宾全场8折的韩式韩式韩式</p>
                        </a>
                        <a  class="act-item" >
                            <img src="tmp/food.png" />
                            <p class="title">2江南金三沙韩式韩式韩式</p>
                            <p class="desp">2江南金三沙韩式韩式韩式</p>
                        </a>
                        <a  class="act-item" >
                            <img src="tmp/food.png" />
                            <p class="title">2江南金三沙韩式韩式韩式</p>
                            <p class="desp">2江南金三沙韩式韩式韩式</p>
                        </a>
                        <a  class="act-item" >
                            <img src="tmp/food.png" />
                            <p class="title">2江南金三沙韩式韩式韩式</p>
                            <p class="desp">2江南金三沙韩式韩式韩式</p>
                        </a>
                        <a  class="act-item" >
                            <img src="tmp/food.png" />
                            <p class="title">2江南金三沙韩式韩式韩式</p>
                            <p class="desp">2江南金三沙韩式韩式韩式</p>
                        </a>
                        <a  class="act-item" >
                            <img src="tmp/food.png" />
                            <p class="title">2江南金三沙韩式韩式韩式</p>
                            <p class="desp">2江南金三沙韩式韩式韩式</p>
                        </a>
                        <a class="actm-item">
                            <p class="more">
                                    <span>查看更多</span>
                                    <span>see more</span>
                            </p>
                        </a>
                    </div>

                </div>
            </div>

            <div class="recommend">
                <div class="hd">
                    <h3 class="ht">热门推荐</h3>
                </div>
                <div class="bd">
                    <div class="rec-item">
                        <img  class="picture" src="tmp/food.png" />
                        <div class="bk-01">
                            <div class="title">
                                <span class="brand">品牌</span>
                                <span class="text">大娘水饺（第一楼接店）</span>
                            </div>
                            <p class="desp">开业酬宾全场8折</p>
                        </div>
                        <div class="bk-02">
                            <span>播放</span>
                            <span>出租车LED镇江地区同步播出中出租车LED镇江地区同</span>
                        </div>
                        <div class="bk-03">
                            <span>领券</span>
                            <span>80折</span>
                        </div>
                    </div>
                </div>
            </div>

    </div>
    <script src="js/rem.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script>

        var swiperBanner = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: '.swiper-pagination',
            spaceBetween: 30,
            effect: 'fade'
        });
        var swiperNews = new Swiper('.swiper-news', {
            autoplayDisableOnInteraction : false,
            direction : 'vertical',
            autoplay :1000,
            loop:true
        });
    </script>
</body>
</html>